<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>储存背景颜色到本地</title>
    <style>
        .pink {
            background-color: pink;
        }
        .skyblue {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <button class="btn1">按钮1</button>
    <button class="btn2">按钮2</button>
</body>
</html>
<script>
    //1.0 原生js,获取按钮
    var btn1 = document.querySelector('.btn1');
    var btn2 = document.querySelector('.btn2');
 
    //3.0获取本地仓库中localColor的值,没有就不作改变
    var getLocal = window.localStorage.getItem("localColor")
    if(getLocal){
        document.body.className = getLocal;
    }else{
 
    }
 
    //2.0 当用户点击第一个按钮
    btn1.onclick = function(){
        //body添加pink类名,背景就会变粉色
        document.body.className = "pink";
        //把粉色存储到本地仓库
        window.localStorage.setItem('localColor','pink');
    }
 
    //2.1 当用户点击第二个按钮    
    btn2.onclick = function(){
        //body添加pink类名,背景就会变天蓝色 
        document.body.className = "skyblue";
        //把蓝色存储到本地仓库
        window.localStorage.setItem('localColor','skyblue');
    } 
</script>